(function(){
  $.ajax({
    url:"http://192.168.23.25:3000/api/getinlanddiscount",
    type:'get',
    datatype:'jsonp',
    success:function(data){
      var i=0;
      //触底事件
      function bottomed(){
            var boxes = document.getElementById("get-con").children;

            var clientHeight = window.innerHeight;
            //页面被卷去的头部
            var scrollTop = window.pageYOffset;
            //最后一个盒子的offsetTop
            var lastBox = boxes[boxes.length - 1];//最后的盒子
            var lastBoxTop = lastBox.offsetTop;
            //窗口的高度+页面被卷去的头部 > 最后一个盒子的offsetTop
               if (clientHeight + scrollTop > lastBoxTop) {
                   return true;//表示触底了
                }
               return false;//没有触底
           }
          // var html = template("get-img",data);
          // $("#get-con").html(html);
           //书写逻辑，将数据存到localstorage
            localStorage.setItem("datas",JSON.stringify(data));
           //在localstorage中取得数据（这里一次性存没问题，但是按需求取数   据）
           //添加判断逻辑先渲染四个，用户触底在执行添加操作；
           var arr =JSON.parse(localStorage.getItem("datas"));
           //可以实现将数据按需求分割存到一个地方，直接在那里取得数据就行
           //先进行试验，将前四个数据渲染到模板上(只需要前四个)
           // console.log(arr.result.shift);
           var brr = {};
           brr.result = [].slice.apply(arr.result,[0,6]);
           //这里brr是arr.result的一部分，所以还需要添加一些东西获得跟arr   相同的东西才能渲染
             // var brr = arr.shift();
           var item = JSON.parse(localStorage.getItem("datas"));//  转化为json对象
           // console.log(item);
           // 渲染到页面上
           var html = template("get-img",brr);
           $("#get-con").html(html);
            var boxes = document.getElementById("get-con").children;
            console.log(boxes[5].offsetTop);
             window.onscroll=function(){
            if(bottomed()&&i<5)
           {
               i = i+1;
             brr.result = [].slice.apply(arr.result,[0,6+4*i]);
             var html = template("get-img",brr);
           $("#get-con").html(html);
           // 给个变量。每当触底事件发生就+1
           // 渲染逻辑在哪加？在所有判断逻辑结束后加，还是边判断边加  
           // console.log($("#get-con").children().offsetTop);
           //按逻辑应该是判断到哪，就加载到哪？而不是一次性加载
           }
           else if(bottomed()&&i==5)
           {
            i= i+1;
            var p ="<p>加载完毕</p>"
           $("#get-con").append(p)  
           }  
           
          }
    }
  })
})()
